.tag {
  cursor: default;
  padding: var(--v-padding-xs) var(--h-padding-xs);
  font: var(--font-tags);
  background-color: transparent;
  border: 1px solid;
  border-radius: var(--radius-xs);

  &-red {
    color: var(--error-border-darker);
    border-color: var(--error-border-default);
  }

  &-yellow {
    color: var(--warning-border-darker);
    border-color: var(--warning-border-default);
  }

  &-green {
    color: var(--success-border-darker);
    border-color: var(--success-border-default);
  }

  &-blue {
    color: var(--primary-border-darker);
    border-color: var(--primary-border-default);
  }
}
